import styled from '@emotion/styled';
import React, { useEffect, useState } from 'react';
import { Empty } from 'antd';
import { useTranslation } from 'react-i18next';

interface ComparisonViewProps {
	type?: string;
	faceUrl?: string;
	userRole?: string;
	result?: string;
	data?: {
		reason?: string
	}
}

const ComparisonContainer = styled.div``;

const ComparisonContent = styled.div`
	background-color: rgba(250, 250, 251, 1);
	margin: 0 14px;
`;

const ComparisonBox = styled.div`
	padding: 20px 20px 32px 20px;
`;

const ComparisonImg = styled.img`
	width: 100%;
`;

const ComparisonRoleSpan = styled.div`
	font-size: 12px;
	color: #666666;
	margin-bottom: 6px;
`;
const ComparisonView = (props: ComparisonViewProps) => {
	const { t } = useTranslation();
	const { faceUrl, userRole, type, result } = props;
	const [emptyText, setEmptyText] = useState('');
	const [reasonText, setReasonText] = useState('');
	const [emptyImage, setEmptyImage] = useState(null);

	useEffect(() => {


		if (type === 'faceCompare') {
			if (result === 'yes') {
				setEmptyText(t('comparison-passed') as string);
				setEmptyImage(require('../../assets/img/faceSuccess.png'));
				setReasonText('');
			} else {
				setEmptyText(t('comparison-failed') as string);
				setReasonText('');
				setEmptyImage(require('../../assets/img/faceError.png'));
			}
		} else if (type === 'cardCompare') {
			if (result === 'success') {
				setEmptyText(t('comparison-passed') as string);
				setReasonText('');
				setEmptyImage(require('../../assets/img/witnessSuccess.png'));
			} else {
				setEmptyText(t('card-comparison-failed') as string);
				setReasonText(t(result!) as string)
				console.log('setReasonText:', result);

				setEmptyImage(require('../../assets/img/witnessError.png'));
			}
			console.log(result);
		}
	}, [props]);

	return (
		<ComparisonContainer>
			<ComparisonContent>
				<ComparisonBox>
					<ComparisonRoleSpan>{userRole === 'normal' ? '' : userRole}</ComparisonRoleSpan>
					<ComparisonImg src={faceUrl}></ComparisonImg>
				</ComparisonBox>
			</ComparisonContent>
			<Empty
				image={emptyImage}
				imageStyle={{
					marginTop: '24px'
				}}
				description={<div>
					<p style={result === 'success' ? { fontSize: '13px', color: '#5ADA8F' } : { fontSize: '13px', color: '#DA5A5A', fontWeight: 700 }}>{emptyText}</p>
					{result !== 'success' ? <p style={{ fontSize: '13px', color: '#DA5A5A ', fontWeight: 700 }}>{reasonText}</p> : null}
				</div>}
			></Empty>
		</ComparisonContainer>
	);
};

export default ComparisonView;
